<template>
  <div class="sliderBar-container">
		<div class="menuTitle">终端机</div>
    <el-menu :default-active="routerPath" :unique-opened="true" router @select="handleSelect"  @open="handleOpen" @close="handleClose" :collapse="isCollapse" background-color="#232b37" text-color="#343434" active-text-color="#fff" :class="isToggle?'menuHeight':''">
      <div v-for="(firstLevel, firstIndex) in permission_routers" :key='firstIndex'>
         <!-- 一级下拉菜单 -->
        <el-submenu :index="firstLevel.path" v-if="!firstLevel.hidden && firstLevel.children && firstLevel.path != '/' && firstLevel.children.hidden">
          <template slot="title" style="background-color : red">
              <span>
                {{firstLevel.meta.title}}

                <span v-if="firstLevel.meta.menuHint">
                  <el-tooltip class="item" popper-class="sliderBar-hintIcon" effect="dark" :content="firstLevel.meta.menuHintContent" placement="right">
                  </el-tooltip>
                </span>

              </span>
          </template>

          <div v-for="(secLevel, secIndex) in firstLevel.children" :key='secIndex'>
            <el-menu-item v-show="!secLevel.hidden" :index="(firstLevel.path==='/'? '':firstLevel.path)+'/'+secLevel.path">
              <span>{{secLevel.meta.title}}</span>
            </el-menu-item>
          </div>
        </el-submenu>

        <!-- 一级点击菜单  列如：首页-->
				
        <div v-else-if="!firstLevel.hidden && firstLevel.children && firstLevel.path == '/'" v-for="(signleItem, signleKey) in firstLevel.children" :key="signleKey">
          <el-menu-item :index="(firstLevel.path==='/'? '/'+firstLevel.children[signleKey].path: firstLevel.path)" :class="componentTitle == firstLevel.children[signleKey].meta.title?'is-active':''" @click.native="changeNav">
            <span>
                {{firstLevel.children[signleKey].meta.title}}
                <span v-if="firstLevel.children[signleKey].meta.menuHint">
                  <el-tooltip class="item" popper-class="sliderBar-hintIcon" effect="dark" :content="firstLevel.children[signleKey].meta.menuHintContent" placement="right">
                  </el-tooltip>
                </span>
            </span>
          </el-menu-item>
        </div>
      </div>
    </el-menu>
		<div class="downMenu" @click="toggleMenu">
			<img :style="isToggle?'transform:rotate(180deg)':''" src="@/assets/img/down.png">
		</div>
  </div>
</template>

<style lang="scss" scoped>
.menuTitle{
	color:#939daa;
	font-size:22px;
	margin-top:70px;
	margin-left:30px;
}
.el-menu {
  border: none;
  height:100%;
	overflow: hidden;
}
.sliderBar-container {
  position: relative;
  z-index: 16;
  height:calc(100% - 120px);
	.downMenu{
		text-align:center;
		margin-top:15px;
		img{
			width:50px;
		}
	}
}
.el-menu-item.is-active > span, .el-submenu .el-menu-item.is-active > span{
  display: inline-block;
  width: 100%;
  height:100%;
  // background-color: #1885d9!important; 
  padding-left: 20px;
  vertical-align: inherit;
}
.el-submenu .el-menu-item > span, .el-menu-item> span {
  padding-left: 20px;
}
.menuHeight{
	overflow:auto;
	height:auto !important;
}
</style>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isCollapse: false,
			componentTitle:'',
			isToggle:false,
    };
  },
  computed: {
    ...mapGetters(["permission_routers"]),
    routerPath() {
      let arr = this.$route.path.split('/');
      if(arr.length> 3) {
        arr.pop();
        return arr.join('/');
      } else {
        return this.$route.path;
      }
    },
  },
  mounted() {
		this.componentTitle = localStorage.getItem('componentTitle')
    //   console.log('router', this.permission_routers);
  },
  methods: {
		changeNav(){
			this.componentTitle = localStorage.getItem('componentTitle')
		},
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
			//this.componentTitle = localStorage.getItem('componentTitle')
      // if(key == this.$route.path) {
      //   this.$router.go(0);
      // }
      
    },
		toggleMenu(){
			this.isToggle = !this.isToggle;
		}

    
  }
};
</script>
